const { ref } = Vue;

export default {
  name: "TodoAdd",
  // 先声明后取值 https://www.icode9.com/content-4-737207.html
  props: {
    tid: Number,
  },
  setup(props, context) {
    const todoContent = ref("");
    const emitAddTodo = () => {
      const todo = {
        id: props.tid,
        content: todoContent.value,
        completed: false,
      };
      context.emit("add-todo", todo);
      todoContent.value = "";
    };
    return {
      todoContent,
      emitAddTodo,
    };
  },
  template: `
  <el-row>
    <el-col :span="24">
      <el-input v-model="todoContent" style="border-radius: 30px;position: relative;" placeholder="待办事项" size="normal"
        clearable @keyup.enter="emitAddTodo">
      </el-input>
      <el-button class="standard_shade sky" style="position: absolute;right: 0px;" type="primary" circle
        size="default" @click="emitAddTodo">
        <i class="fa fa-plus" aria-hidden="true"></i>
      </el-button>
    </el-col>
  </el-row>
  `,
};
